<template>
    <div class="scheme-production-increase" :key="compSelectorkeys">
        <!-- 新增弹窗 -->
        <a-modal
         class="scheme-modal flow-path-model-box"
         :visible="visibleShow" 
         title='办理'
         :maskClosable="false"
         :closable="false"
         :destroyOnClose="true"
         width="100%"
         wrapClassName="full-modal"
         >
            <div style="height: 100%;background: #fff;">
                <a-spin size="large" :spinning="spinning" :key="spinningKey">
                    <div style="width: 100%; background-color: #fff;position: fixed; top: 0;z-index: 99;left:0;padding: 10px 10px 10px 24px;display: flex;">
                        <div>
                            <a-button class="blue-btn" type="primary" @click="returnClick()">返回</a-button>
                            <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="refreshClick()">刷新</a-button>
                        </div>
                        <div style="margin-left: 50px;" >
                            <a-button class="blue-btn" type="primary" @click="linkHandling('submitFlow')">办理</a-button>
                            <!-- <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="returnPreviousLink('returnUpperXcjcFlowJob')">退回</a-button> -->
                        </div>
                    </div>
                    <div style="width: 100%;height: 60px;"></div>
                    <a-tabs v-model:activeKey="matterActiveKey" @change="matterChange" class="matter-handle-tabs">
                        <a-tab-pane key="事项办理" tab="事项办理"></a-tab-pane>
                        <a-tab-pane key="事项信息" tab="事项信息"></a-tab-pane>
                    </a-tabs>
                    <div>
                        <eventSet ref="eventSetRef" v-show="matterActiveKey == '事项信息'" :parameter="parameterData"  />
                    </div>
                    <!-- <a-collapse>
                        <a-collapse-panel key="1" :header="'事项信息内容  '+headerText1+headerText2">
                            <dealWith 
                            :key="compSelectorkeys" 
                            ref="dealWithRef" 
                            :parameter="parameterData" 
                            @successReturn="successReturn"/>
                            <a-form layout="inline" style="display: flex;justify-content: center;padding-top: 20px;">
                                <a-form-item >
                                    <a-button class="blue-btn" type="primary" @click="preserveClick()">保存</a-button>
                                </a-form-item>
                                <a-form-item >
                                    <a-button class="blue-btn" type="primary" @click="submitClick()" >提交</a-button>
                                </a-form-item>
                            </a-form>
                        </a-collapse-panel>
                    </a-collapse> -->
                    <div v-show="matterActiveKey == '事项办理'" style="height: calc(100vh - 130px);overflow: hidden;">
                        <segment 
                        ref="segmentRefs"
                        v-if="addEditParameter.fhjmc == '技术审评' && isUpdated" 
                        :flowPathParameter="addEditParameter" 
                        @successReturn="successReturn" 
                        :modalContentHeight="modalContentHeight" 
                        @updatedSuccess="updatedSuccess"
                        />
                        <technicalReview 
                        ref="segmentRefs"
                        v-if="addEditParameter.fhjmc !== '技术审评' && isUpdated" 
                        :addEdittechnicalReview="addEdittechnicalReview"  
                        @successReturn="successReturn"
                        @updatedSuccess="updatedSuccess"
                        />
                    </div>
                    <processingConditionsAll ref="processingConditionsAllRef" :processingData="processingData" @interfaceSuccessful="interfaceSuccessful"></processingConditionsAll>
                </a-spin>
            </div>
        </a-modal>
    </div>
</template>
<script>
import eventSet from '../acceptanceRegistration/dealWith.vue'
import {addSqsxBasicServe} from './service/index'
import segment from './segment.vue'
import technicalReview from './technicalReview.vue'
export default {
    components:{
        eventSet,
        segment,
        technicalReview,
    },
    props:{
        addEditParameter:{
            type:[Array,Object],
            default: () => {},
            required:false
        },
        addEdittechnicalReview:{
            type:[Array,Object],
            default: () => {},
            required:false
        }
    },
    watch:{
        addEditParameter: {
            handler (newval, oldVal) {
                
            },
            immediate: true,
            deep: true
        },
        
    },
    data(){
        return{
            processingData:{},
            spinningKey:null,
            spinning:true,
            isUpdated:false,
            modalContentHeight:1000,
            visibleShow:false,
            confirmLoading:false,
            formState:{},
            formRequer:'',
            submittedSuccessfully:false,
            parameterData:{},
            compSelectorkeys:null,
            headerText1:this.addEditParameter.fsqdbh?'申请单编号：'+this.addEditParameter.fsqdbh:'',
            headerText2:this.addEditParameter.fslbh?('  受理编号：'+this.addEditParameter.fslbh):'',
            flowPath2Parameter:{},
            matterActiveKey:'事项办理',
        }
    },
    
    mounted(){
        
    },
    updated(){
        
        // this.modalContentHeight = document.querySelector(".ant-modal-content").offsetHeight
        this.isUpdated = true
        //console.log('获取元素的高度',)
    },
    methods:{
        getData(newval){
            this.spinning = true
            //console.log('技术审评办理获取到了什么',newval)
            this.parameterData = newval
            this.compSelectorkeys = Date.now()
            this.matterActiveKey='事项办理'
            this.$nextTick(()=>{
                this.$refs.eventSetRef.getDatas(newval)
            })
        },
        matterChange(){
            // if(this.matterActiveKey == '事项信息'){
            //     this.$nextTick(()=>{
            //         this.$refs.eventSetRef.getDatas(this.parameterData)
            //     })
            // }
        },
        cancelFalse(){
            this.spinning = true
        },
        updatedSuccess(){
            this.cancelLoading()
        },
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        returnClick(){//返回
            this.visibleShow = false
        },
        refreshClick(){
            this.$emit('reviseClick',this.addEditParameter)
            this.spinning = true
            this.spinningKey = Date.now()
            this.cancelLoading()
        },
        preserveClick(){//保存
            this.$refs.dealWithRef.handlePreserve()
        },
        // submitClick(){//提交
        //     this.$refs.dealWithRef.shandleSubmit()
        // },
        successReturn(val){
            this.visibleShow = val
            this.$emit('successReturn')
        },
        linkHandling(val){
            let result = this.$refs.segmentRefs.segmentSubmitClick(2)
            if(result){
                this.$refs.processingConditionsAllRef.processingConditionsVisible = true
                let data = {
                    interface:val,
                    sqsxid:this.addEditParameter.sqsxid,
                    nextNodeDbrList:this.addEditParameter.nextNodeDbrList,
                    nextNode:this.addEditParameter.nextNode,
                    jobid:this.addEditParameter.jobid,
                    headerLeftTitle:'办理',
                    headerCenterTitle:'药品生产查验--技术审评',
                    isBlyj:false,
                    isAskAbout:true,
                }
                this.processingData = data
                this.$refs.processingConditionsAllRef.getData(data)
            }
        },
        returnPreviousLink(val){
            this.$refs.segmentRefs.segmentSubmitClick(1,true)
            this.$refs.processingConditionsAllRef.processingConditionsVisible = true
            let data = {
                interface:val,
                sqsxid:this.addEditParameter.sqsxid,
                nextNodeDbrList:this.addEditParameter.nextNodeDbrList,
                nextNode:this.addEditParameter.nextNode,
                jobid:this.addEditParameter.jobid,
                isBlr:false,
                isThhj:true,
                isXyb:false,
                headerLeftTitle:'退回',
                headerCenterTitle:'药品生产查验--技术审评',
            }
            this.processingData = data
            this.$refs.processingConditionsAllRef.getData(data)
        },
        interfaceSuccessful(){
            this.successReturn(false)
        },
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .scheme-modal .ant-modal-header{
    display: none !important;
 }
 .scheme-modal .ant-modal-footer{
    display: none !important;
 }
 .scheme-modal .ant-modal-content{
    height: 100vh;
    overflow: auto;
 }
 .full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
.scheme-modal{
    // .ant-collapse{
    //     background-color: #ded1de !important;
    //     border:1px solid #ded1de !important;
    //     border-bottom: 0 !important;
    // }
    .ant-collapse-header{
        // color: #fff !important;
    }
}

</style>